<script setup>
import {ref} from "vue";
const props = defineProps({
  curIndex : {
    type: Number,
    default: 0
  }
})
const list =[
  {
    "pagePath": "/pages/Homepage/Homepage",
    "iconPath": "/static/image/icon1.png",
    "selectedIconPath": "/static/image/icon1_selected.png",
    "text": "主页"
  },{
    "pagePath": "/pages/user/user",
    "iconPath": "/static/image/icon2.png",
    "selectedIconPath": "/static/image/icon2_selected.png",
    "text": "留校签到"
  },{
    "pagePath": "/pages/function/function",
    "iconPath": "/static/image/icon3.png",
    "selectedIconPath": "/static/image/icon3_selected.png",
    "text": "更多功能"
  }
]

const toTabbar = (path,index)=>{
  uni.navigateTo({
    url:path
  });
}
</script>

<template>
<view class="main1">
  <view v-for="(item,index) in list" :key="index" @click="toTabbar(item.pagePath,index)">
    <view>
      <image v-if="index != props.curIndex" class="img1" :src="item.iconPath"></image>
      <image v-else class="img1" :src="item.selectedIconPath"></image>
    </view>
    <view :class="index == props.curIndex ?'checked':'noChecked'">
      {{item.text}}
    </view>
  </view>
</view>
</template>

<style scoped>
.img1{
  margin-top: 6px;
  width: 24px;
  height: 24px;
}
.main1{
  border-top: 1px solid #7A7E83;
  position: fixed;
  bottom: 0px;
  background-color: white;
  height: 55px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  color: #7A7E83;
  text-align: center;
  font-size: 13px;
  font-family: PingFangSC-Regular;

}
.checked{
  color: #151618;
}
</style>